<template>
    <div class="main">
        <div class="top_box">
            <el-input style="width: 200px" placeholder="搜索用户信息" v-model="keyword"></el-input>

            <!-- <el-cascader style="width:200px;margin-left:20px" ref="cascader" v-model="admin_id" :props="props" clearable
                placeholder="请选择管理中心/路段"></el-cascader> -->
            <el-select v-if="!(role == 18 || role == 19)" style="width: 200px; margin-left: 20px" v-model="admin_id" placeholder="请选择管理中心">
                <el-option v-for="item in managementCenter" :key="item.id" :label="item.nickname" :value="item.id">
                </el-option>
            </el-select>
            <el-select style="width: 200px; margin-left: 20px" v-model="department" placeholder="请选择部门">
                <el-option v-for="item in departmentList" :key="item.id" :label="item.name" :value="item.id">
                </el-option>
            </el-select>
            <!-- <el-select style="width:200px;margin-left:20px" v-model="cl_statusid" placeholder="请选择状态">
                <el-option v-for="(item, index) in cl_statusList" :key="index" :label="item" :value="index">
                </el-option>
            </el-select> -->
            <div style="margin-left: 10px">
                <el-date-picker v-model="time" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
                </el-date-picker>
            </div>
            <el-button type="warning" style="margin-left: 10px" icon="el-icon-search" size="small" @click="getInfo">搜索</el-button>
            <el-button style="margin-left: 20px" size="small" @click="reset" type="primary">重置</el-button>
        </div>
        <!-- 表格 -->
        <el-table :data="data" style="width: 100%" border height="100%">
            <el-table-column type="index" label="序号" width="100" align="center">
            </el-table-column>
            <el-table-column label="用户名称" width="120">
                <template slot-scope="{ row }">
                    <el-tooltip class="item" effect="dark" :content="row.username" placement="top">
                        <div>{{ row.username }}</div>
                    </el-tooltip>
                </template>
            </el-table-column>
            <el-table-column prop="mobile" label="用户手机号" width="130"> </el-table-column>
            <el-table-column prop="init_admin_name" label="初始管理中心" width="150">
            </el-table-column>

            <el-table-column prop="department_name" label="部门名称" width="120">
            </el-table-column>
            <el-table-column prop="p_department_name" label="意见建议分类" width="130">
            </el-table-column>
            <el-table-column prop="road_number" label="路段编号" width="130"> </el-table-column>
            <el-table-column label="路段名称" width="150">
                <template slot-scope="{ row }">
                    <el-tooltip class="item" effect="dark" :content="row.road_name" placement="top">
                        <div>{{ row.road_name }}</div>
                    </el-tooltip>
                </template>
            </el-table-column>
            <el-table-column label="收费站/服务区" width="130">
                <template slot-scope="{ row }">
                    <el-tooltip class="item" effect="dark" :content="row.p_road_name" placement="top">
                        <div>{{ row.p_road_name }}</div>
                    </el-tooltip>
                </template>
            </el-table-column>
            <el-table-column prop="content" label="反馈内容" width="120">
                <template slot-scope="{ row }">
                    <el-tooltip class="item" effect="dark" :content="row.content" placement="top">
                        <div>{{ row.content }}</div>
                    </el-tooltip>
                </template>
            </el-table-column>
            <el-table-column label="反馈图片" width="220">
                <template slot-scope="{ row }">
                    <div style="display: flex">
                        <div v-for="(item, index) in row.img" :key="index">
                            <el-image style="width: 60px; height: 60px; margin-right: 10px" :src="item" :preview-src-list="row.img" v-if="item"></el-image>
                        </div>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="处理人身份" width="130">
                <template slot-scope="{ row }">
                    {{ row.identity == 1 ? "路网" : "管理中心" }}
                </template>
            </el-table-column>
            <!-- <el-table-column label="回复内容/原因" prop="reply" v-if="$auth('内容')" min-width="220">
            </el-table-column> -->
            <el-table-column prop="admin_name" label="处理工单管理中心" width="200">
            </el-table-column>
            <el-table-column label="状态" width="150">
                <template slot-scope="{ row }">
                    <div :style="{
              color:
                row.cl_status == 0
                  ? '#409eff'
                  : row.cl_status == 1
                  ? '#e6a23c'
                  : row.cl_status == 2
                  ? '#20932e'
                  : row.cl_status == 3
                  ? '#f56c6c'
                  : '#ab3450',
            }">
                        <!-- {{ cl_status(row) }} -->
                        <el-tooltip class="item" effect="dark" :content="scl_status(row)" placement="top">
                            <div>{{ scl_status(row) }}</div>
                        </el-tooltip>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="创建时间" width="150">
                <template slot-scope="{ row }">
                    <!-- {{ row.create_time | dateFormat }} -->
                    {{ row.create_time != 0 ? comTime(row.create_time) : "" }}
                </template>
            </el-table-column>
            <el-table-column align="center" label="操作" min-width="300" fixed="right">
                <template slot-scope="{ row }">
                    <div class="backfixed">
                        <el-button type="primary" style="margin: 10px 5px" @click="openDialog(row)">查看工单详情</el-button>

                        <!-- 路网-->
                        <!-- 0中心处理1路网审核2处理完成3处理失败4处理不了提交路网 -->
                        <div v-show="role == 16 || role == 20">
                            <el-button type="warning" style="margin: 10px 5px" v-if="row.cl_status !== 1" @click="LWdispose(row)">处理工单</el-button>
                            <!-- 路网审核 v-if="row.cl_status==1"-->
                            <el-button type="success" style="margin: 10px 5px" v-if="row.cl_status == 1" @click="examineoption(1, row)">通过</el-button>
                            <el-button type="danger" style="margin: 10px 5px" v-if="row.cl_status == 1" @click="examineoption(2, row)">拒绝</el-button>
                        </div>

                        <!-- 管理中心处理工单  v-show="role == 18 || role == 19"-->
                        <el-button type="info" v-if="row.is_show==true" @click="settingInvalid(row.work_id)">设置无效工单</el-button>
                        <el-button type="success" native-type="button" style="margin: 10px 5px" v-show="findButton('管理中心权限')" v-if="row.cl_status !== 1" @click="submit(row)">提交</el-button>
                        <el-button type="warning" native-type="button" style="margin: 10px 5px" v-show="findButton('管理中心权限')" v-if="row.cl_status !== 1" @click="returnZY(row)">退回</el-button>
                        <el-button type="warning" style="margin: 10px 5px" v-show="findButton('管理中心员工权限')" v-if="row.cl_status !== 1" @click="GLdispose(row)">处理工单</el-button>
                        <el-button type="danger" style="margin: 10px 5px" @click="wanderAbout(row)">流转信息</el-button>
                    </div>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination class="main-pagination" :total="total" :current-page.sync="page" :page-size="limit" layout="prev, pager, next, jumper,total" @current-change="getInfo" hide-on-single-page></el-pagination>
        <!-- 详情 -->
        <el-dialog title="工单详情" :visible.sync="dialogVisible" width="60%">
            <div>
                <div class="info" style="margin-bottom: 30px">
                    <div class="left">
                        <div class="left_top" style="margin-bottom: 20px">
                            <div class="title_box">用户信息</div>
                            <div class="lable">用户名称：{{ popRow.username }}</div>
                            <div class="lable">用户手机号：{{ popRow.mobile }}</div>
                        </div>
                        <div class="left_top" style="margin-bottom: 20px">
                            <div class="title_box">详情信息</div>
                            <div class="lable">管理中心名称：{{ popRow.admin_name }}</div>
                            <div class="lable">部门名称：{{ popRow.department_name }}</div>
                            <div class="lable">路段名称：{{ popRow.road_name }}</div>
                            <div class="lable">提交时间： {{ popRow.create_time != 0 ? comTime(popRow.create_time) : "" }}</div>
                        </div>
                        <div class="left_top">
                            <div class="title_box">处理状态</div>
                            <div class="lable">
                                处理人身份：{{ popRow.identity == 1 ? "路网" : "管理中心" }}
                            </div>
                            <div class="lable">状态：{{ comClStutas(popRow.cl_status) }}</div>
                            <div class="lable">内容：{{ popRow.reply }}</div>
                        </div>
                    </div>
                    <div class="right">
                        <div class="leftbox">
                            <div class="leftbox_item">
                                <div class="right_title">反馈内容</div>
                                <div>{{ popRow.content }}</div>
                            </div>
                            <div class="leftbox_item">
                                <div class="right_title">反馈图片</div>
                                <div class="imgs">
                                    <div v-for="(item, index) in imgs" :key="index" style="margin-right: 10px">
                                        <el-image :preview-src-list="[item]" :src="item" v-if="item" style="width: 80px; height: 80px" />
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="leftbox">
                            <div class="leftbox_item">
                                <div class="right_title">回复内容</div>
                                <div>{{ popRow.reply }}</div>
                            </div>
                            <div class="leftbox_item">
                                <div class="right_title">回复图片</div>
                                <div class="imgs">
                                    <div v-for="(item, index) in reply_img" :key="index" style="margin-right: 10px">
                                        <el-image :preview-src-list="[item]" :src="item" v-if="item" style="width: 80px; height: 80px" />
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div>
                    <div class="title">答题详情</div>
                    <div class="type" v-for="item in answer" :key="item.id">
                        <div>
                            {{ item.name }}
                        </div>
                        <div v-for="item1 in item.subject" :key="item1.id">
                            <div>
                                <div class="type_name">
                                    {{ item1.name }}
                                </div>
                                <div v-for="item2 in item1.option" :key="item2.id">
                                    <div>
                                        <el-radio-group v-model="item2.is_checked">
                                            <el-radio disabled :label="2">{{ item2.option_name }}</el-radio>
                                        </el-radio-group>
                                    </div>
                                    <div v-if="item2.is_checked == 2" style="margin: 0 40px">
                                        <div v-for="i in item2.options" :key="i.id">
                                            <el-radio-group v-model="i.is_checked">
                                                <el-radio disabled :label="2">{{ i.option_name }}&nbsp;
                                                    <span v-if="i.desc">({{ i.desc ? i.desc : "" }})</span></el-radio>
                                            </el-radio-group>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </el-dialog>

        <el-dialog title="详情" :visible.sync="isDialog" @close="close">
            <component v-if="isDialog" :is="dialogView" :managementCenter="managementCenter" :rowData="rowData" @closePopover="closePopover"></component>
        </el-dialog>
        <!-- 拒绝原因 -->
        <el-dialog title="拒绝原因" :visible.sync="dialogFormVisible" width="30%" :show-close="false">
            <el-input type="textarea" rows="5" placeholder="请输入拒绝原因" v-model="reson"></el-input>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="refuseConfirm">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 流转信息 -->
        <el-dialog title="流转信息" :visible.sync="dialogWanderAbout" width="80%" :show-close="false">
            <el-table :data="wanderAboutList" style="width: 100%" border>
                <el-table-column prop="send_nickname" label="处理人"> </el-table-column>
                <el-table-column label="处理内容">
                    <template slot-scope="{ row }">
                        <el-tooltip effect="dark" :content="row.cause" placement="top">
                            <div>{{ row.cause }}</div>
                        </el-tooltip>
                    </template>
                </el-table-column>
                <el-table-column label="处理凭证">
                    <template slot-scope="{ row }">
                        <div v-for="(item,index) in row.img" :key="index">
                            <el-image :preview-src-list="[item]" :src="item" v-if="item" style="width:60px;height:60px" />
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="处理人状态">
                    <template slot-scope="{ row }">
                        <div :style="{ color: row.status == 0 ? '#F56C6C' : '#67c23a' }">
                            {{ comLZStutas(row.status) }}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="get_nickname" label="接收工单管理员"> </el-table-column>
                <el-table-column label="处理内容">
                    <template slot-scope="{ row }">
                        <el-tooltip class="item" effect="dark" :content="row.g_cause" placement="top">
                            <div>{{ row.g_cause }}</div>
                        </el-tooltip>
                    </template>
                </el-table-column>
                <el-table-column label="处理凭证">
                    <template slot-scope="{ row }">
                        <div v-for="(item,index) in row.g_img" :key="index">
                            <el-image :preview-src-list="[item]" :src="item" v-if="item" style="width:60px;height:60px" />
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="状态">
                    <template slot-scope="{ row }">
                        <div :style="{ color: row.cl_status == 0 ? '#F56C6C' : '#67c23a' }" v-if="row.get_nickname">
                            {{ comLZStutas(row.cl_status) }}
                        </div>
                        <div v-else>{{ "" }}</div>
                    </template>
                </el-table-column>
                <el-table-column label="生成记录时间">
                    <template slot-scope="{ row }">
                        <!-- {{ row.create_time }} -->
                        {{ row.create_time != 0 ? comTime(row.create_time) : "" }}
                    </template>
                </el-table-column>
                <el-table-column label="处理时间">
                    <template slot-scope="{ row }">
                        {{ row.handle_time != 0 ? comTime(row.handle_time) : "" }}

                        <!-- {{ row.handle_time | dateFormat }} -->
                    </template>
                </el-table-column>
            </el-table>
        </el-dialog>
    </div>
</template>

<script>
import { post } from "@/assets/js/http.js";
export default {
    components: {
        LWdispose: () => import("./LWdispose.vue"),
        GLdispose: () => import("./GLdispose.vue"),
    },
    data() {
        return {
            total: 0,
            limit: 20,
            page: 1,
            time: [],
            admin_id: [],
            department: "",
            keyword: "",
            data: [],
            role: localStorage.getItem("role"),
            id: "",
            dialogVisible: false,
            popRow: {},
            answer: [],
            identity: {},
            imgs: [],
            reply_img: [],
            isDialog: false,
            dialogView: "",
            //管理中心列表
            managementCenter: [],
            // 部门列表
            departmentList: [],
            cl_statusList: ["待处理", "路网审核", "处理完成", "其它", "提交路网"], //0待处理1路网审核2处理完成3其它4提交路网
            // cl_statusid: '',
            rowData: {},
            reson: "", //拒绝原因
            dialogFormVisible: false,
            // 流转信息
            wanderAboutList: [],
            // 是否显示流转信息
            dialogWanderAbout: false,
            // props: {
            //     label: "nickname",
            //     value: "id",
            //     lazy: true,
            //     async lazyLoad(node, resolve) {
            //         const { level, value } = node;
            //         if (level === 0) {
            //             const result = await post({
            //                 url: "/admin/answer.Subject/admin_list",
            //                 data: {}
            //             });
            //             resolve(result);
            //         } else if (level === 1) {
            //             const result = await post({
            //                 url: "/admin/answer.Road/index",
            //                 data: {
            //                     admin_id: value,
            //                     limit: 50,
            //                 }
            //             });
            //             result.data.forEach((item) => {
            //                 item.leaf = true
            //                 item.nickname = item.road_name
            //             });
            //             resolve(result.data);
            //         }
            //     },
            // },
        };
    },
    methods: {
        getInfo(index = 1) {
            let time = [];
            if (this.time.length != 0) {
                time = this.time.map((item) => item / 1000);
            }
            post({
                url: "/admin/answer.Subject/todo",
                data: {
                    keyword: this.keyword,
                    admin_id: this.admin_id,
                    // admin_id: this.admin_id[0] || '',
                    // road_id: this.admin_id[1] || "",
                    department: this.department,
                    page: index,
                    limit: this.limit,
                    time: time,

                    // cl_status: this.cl_statusid,
                    type: 1, // = 1 通过/拒绝工单 2派单工单
                },
                loading: true,
            }).then((res) => {
                this.total = res.total;
                res.data.forEach((item) => {
                    let imgs = item.img.split("|");
                    item.img = imgs;
                });
                res.data.forEach((item) => {
                    let reply_img = item.reply_img.split("|");
                    item.reply_img = reply_img;
                });
                this.data = res.data;
            });
        },
        //路网审核n==1通过，2拒绝
        examineoption(n, row) {
            this.id = row.id;
            if (n == 1) {
                this.$confirm("确认通过吗?", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                })
                    .then(async () => {
                        const dataa = await post({
                            //0中心处理1路网审核2处理完成3处理失败4处理不了提交路网
                            url: "/admin/answer.Subject/road_work",
                            data: {
                                cl_status: 2,
                                id: row.id,
                            },
                            loading: true,
                        });
                        console.log(dataa, "dataa");
                        this.$message({
                            type: "success",
                            message: dataa.msg,
                        });
                        this.getInfo();
                    })
                    .catch(() => { });
            } else {
                this.dialogFormVisible = true;
            }
        },
        async refuseConfirm() {
            const dataa = await post({
                //0中心处理1路网审核2处理完成3处理失败4处理不了提交路网
                url: "/admin/answer.Subject/road_work",
                data: {
                    cl_status: 3,
                    reply: this.reson,
                    id: this.id,
                },
                loading: true,
            });
            console.log(dataa, "dataa");
            this.$message({
                type: "success",
                message: dataa.msg,
            });
            this.dialogFormVisible = false;
            this.getInfo();
            // post({
            // 	url:'/admin/answer.Subject/road_work',
            // 	data:{
            // 		 cl_status:3,
            // 		 reply:this.reson,
            // 		 id:this.id
            // 	}
            // }).then(res=>{
            // 	this.dialogFormVisible = false
            // 	this.getInfo()
            // })
        },
        // 获取管理中心列表
        getManagementCenter() {
            post({
                url: "/admin/answer.Subject/admin_list",
            }).then((res) => {
                this.managementCenter = res;
            });
        },
        // 获取部门列表
        getDepartment() {
            post({
                url: "admin/answer.Road/department",
            }).then((res) => {
                this.departmentList = res;
            });
        },
        // 管理员处理按钮
        LWdispose(row) {
            this.dialogView = "LWdispose";
            this.isDialog = true;
            this.rowData = row;
        },
        // 管理中心提交
        submit(row) {
            this.$confirm("是否提交", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    post({
                        url: "/admin/answer.Subject/gl_handle",
                        data: {
                            status: 1,
                            id: row.id,
                        },
                        successTip: true,
                    }).finally(() => {
                        this.getInfo();
                    });
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消提交",
                    });
                });
        },
        // 管理中心退回
        returnZY(row) {
            this.$confirm("是否退回", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    post({
                        url: "/admin/answer.Subject/gl_handle",
                        data: {
                            status: 2,
                            id: row.id,
                        },
                        successTip: true,
                    }).finally(() => {
                        this.getInfo();
                    });
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消退回",
                    });
                });
        },
        // 管理中心处理按钮managementCenter
        GLdispose(row) {
            this.dialogView = "GLdispose";
            this.isDialog = true;
            this.rowData = row;
        },
        // 子组件通信回调
        closePopover(value) {
            this.isDialog = value;
            this.getInfo();
        },
        // 流转信息按钮
        wanderAbout(row) {
            post({
                url: "/admin/answer.Subject/wander_about",
                data: {
                    id: row.id,
                },
            }).then((res) => {
                let data = res
                data.forEach(item => {
                    item.img = item.img ? item.img.split("|") : ""
                    item.g_img = item.g_img ? item.g_img.split("|") : ""
                })
                this.wanderAboutList = res;
                this.dialogWanderAbout = true;
            });
        },
        // 设置无效工单按钮
        settingInvalid(work_id) {
            post({
                url: "/admin/answer.Subject/set_valid",
                data: {
                    work_id
                },
                loading: true,
                successTip: true
            }).then(res => {
                console.log(res, "resresres");
                this.getInfo()
            })
        },
        close() {
            this.rowData = {};
        },
        // 重置
        reset() {
            this.keyword = "";
            this.admin_id = [];
            this.department = "";
            this.cl_statusid = "";
            this.time = "";
            this.getInfo();
        },
        openDialog(row) {
            this.dialogVisible = true;
            this.popRow = row;
            this.answer = row.answer;
            this.imgs = row.img;
            this.reply_img = row.reply_img;
        },
    },
    computed: {
        comClStutas() {
            return (item) => {
                switch (item) {
                    case 0:
                        return "待处理";
                    case 1:
                        return "路网审核";
                    case 2:
                        return "处理完成";
                    case 3:
                        return "其他";
                    case 4:
                        return "处理不了提交路网";
                    case 5:
                        return "管理中心待审核";
                }
            };
        },
        comLZStutas() {
            return (item) => {
                switch (item) {
                    case 0:
                        return "待处理";
                    case 1:
                        return "已处理";
                }
            };
        },
        comTime() {
            return (value) => {
                var date = new Date(value * 1000); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
                var year = date.getFullYear();
                var month = ("0" + (date.getMonth() + 1)).slice(-2);
                var sdate = ("0" + date.getDate()).slice(-2);
                var hour = ("0" + date.getHours()).slice(-2);
                var minute = ("0" + date.getMinutes()).slice(-2);
                var second = ("0" + date.getSeconds()).slice(-2);
                // 拼接
                var result = year + "-" + month + "-" + sdate + " " + hour + ":" + minute; //+ ":" + second;
                // 返回
                return result;
            };
        },
        scl_status() {
            // {{ row.cl_status == 0 ? '管理中心' + row.department_name + '待处理' : row.cl_status == 1 ? '路网' +
            //     row.department_name + '待审核' : row.cl_status == 2 ? '处理完成' : row.cl_status == 3 ? '处理失败' : '已提交路网审核' }}
            return (data) => {
                if (data.cl_status == 0) {
                    return data.admin_name + data.department_name + "待处理";
                } else if (data.cl_status == 1) {
                    return "路网" + data.department_name + "待审核";
                } else if (data.cl_status == 2) {
                    return "处理完成";
                } else if (data.cl_status == 3) {
                    return "其他";
                } else if (data.cl_status == 5) {
                    return "管理中心待审核";
                } else {
                    return "已提交路网审核";
                }
            };
        },
    },
    mounted() {
        this.getInfo();
        this.getManagementCenter();
        this.getDepartment();
    },
    // filters: {
    //     //过滤器 用于格式化时间
    //     dateFormat: function (value) {
    //         var date = new Date(value * 1000); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
    //         var year = date.getFullYear();
    //         var month = ("0" + (date.getMonth() + 1)).slice(-2);
    //         var sdate = ("0" + date.getDate()).slice(-2);
    //         var hour = ("0" + date.getHours()).slice(-2);
    //         var minute = ("0" + date.getMinutes()).slice(-2);
    //         var second = ("0" + date.getSeconds()).slice(-2);
    //         // 拼接
    //         var result = year + "-" + month + "-" + sdate + " " + hour + ":" + minute //+ ":" + second;
    //         // 返回
    //         return result;
    //     },
    // },
};
</script>

<style lang="scss" scoped>
.title {
    line-height: 24px;
    font-size: 18px;
    color: #222 !important;
    padding: 20px 20px 30px 0;
    font-family: PingFang SC;
    -webkit-font-smoothing: antialiased;
}

.info {
    width: 100%;
    display: flex;
    justify-content: space-between;

    .left {
        width: 30%;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: auto;

        .left_top {
            padding: 20px;
            width: 100%;
            background: #ffffff;
            box-shadow: inset 0px 3px 12px 1px rgba(180, 240, 255, 0.6);
            border-radius: 15px;
            position: relative;

            .title_box {
                font-size: 20px;
                font-family: PingFang SC-Bold, PingFang SC;
                font-weight: bold;
                display: inline-block;
                padding: 5px 15px;
                color: #ffffff;
                box-sizing: border-box;
                white-space: nowrap;
                border-radius: 25px;
                background: #409eff;
                position: absolute;
                left: 50%;
                transform: translate(-50%, calc(-50% - 20px));
            }

            .lable {
                font-size: 16px;
                font-family: PingFang SC-Regular, PingFang SC;
                font-weight: 400;
                color: #222222;
                line-height: 1.8em;
            }
        }
    }

    .right {
        width: 60%;
        // min-height: 200px;
        background: #ffffff;
        box-shadow: inset 0px 3px 12px 1px rgba(180, 240, 255, 0.6);
        border-radius: 15px;
        padding: 30px;
        display: flex;
        flex-direction: column;
        height: 100%;
        .leftbox {
            width: 100%;
            min-height: 150px;
            display: flex;
            flex-shrink: 0;
            gap: 0 15px;
            .leftbox_item {
                width: 50%;
                height: auto;
            }
            .right_title {
                font-size: 20px;
                font-family: PingFang SC-Bold, PingFang SC;
                font-weight: bold;
                color: #222222;
            }

            .imgs {
                display: flex;

                flex-wrap: wrap;
            }
        }
    }
}

.type {
    font-size: 25px;
    font-family: Source Han Sans CN;
    font-weight: 500;
    color: #1067b5;
    background: #fff;
    padding: 20px;
    box-sizing: border-box;

    .type_name {
        background: linear-gradient(90deg, #cae4ff, #ffffff);
        border-radius: 10px;
        font-size: 18px;
        font-family: Source Han Sans CN;
        font-weight: 500;
        color: #222222;
        padding: 14px;
    }
}

.imgs {
    display: flex;
}

::v-deep .is-checked > .el-radio__label {
    color: #409eff !important;
}

::v-deep .is-checked > .el-radio__inner {
    color: #409eff !important;
    background-color: #409eff !important;
    border-color: #e4e7ed !important;
}

::v-deep .el-table__row :last-child {
    .cell {
        white-space: pre-wrap;
    }
}

::v-deep .cell {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

::v-deep .cell .el-tooltip {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dialog_box {
    height: 80vh;
    overflow: hidden;
}

.row_box {
    height: 100%;
}
</style>
